    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
      <title>Professional Accordion Slide リンク先 テスト</title>  
<base href="http://kiyoto777.web.fc2.com/test/">
      <style type="text/css">  
        #slide{z-index: 100;}
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/pro_concertinaslide_2.html
Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
This script and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.menuPad
{
  height: 280px;
}

#slide
{
  padding: 10px;
  margin: 0;
  width: 181px;
  font-family: arial, sans-serif;
  font-size: 12px;
  background: #000;
  position: absolute;
  z-index: 100;
}
#slide dt
{
  padding: 0;
  margin: 0;
  width: 181px;
  height: 37px;
  background: url(images/back.png);
  color: #ddd;
  text-align: center;
  line-height: 37px;
  cursor: pointer;
  font-weight: bold;
}
#slide dt.slide
{
  color: #fff;
  background: url(images/back.png) left bottom;
}
#slide dt a
{
  display: block;
  height: 37px;
  color: #fff;
  text-decoration: none;
  line-height: 37px;
}
#slide dt a:hover
{
  color: #fc0;
}
#slide dd
{
  padding: 0;
  margin: 0;
  background: #eee url(shade.png) no-repeat top left;
  text-align: center;
  width: 181px;
  height: 0;
  overflow: hidden;
  position: relative;
}
#slide dd ul
{
  padding: 0;
  margin: 0;
  list-style: none;
  position: absolute;
  left: 0;
  bottom: 0;
  height: auto;
}
#slide dd ul li
{
  border-bottom: 1px solid #aaa;
  width: 181px;
  height: 25px;
  line-height: 25px;
}
#slide dd ul li a
{
  color: #666;
  text-decoration: none;
  font-size: 11px;
  display: block;
  height: 25px;
}
#slide dd ul li a:hover
{
  color: #000;
}
</style>    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>    
<script type="text/javascript">  
        $(function() {  
          var $getdt = $('dl#slide > dt');  
          var $getdd = $('dl#slide > dd');  
      
          $getdt.each(function() {  
            $(this).click(function() {  
              if (this.id.indexOf('item') != -1) {  
                var thisParent = this;  
                $getdd.each(function() {  
                  if (this.id.indexOf(thisParent.id) != -1 && this.className == '') {  
                    var ulHeight = $(this).children('ul').get(0).offsetHeight;  
                    $(this).stop().animate({ height: ulHeight + 'px' }, 450);  
                  }  
                  else {  
                    if (this.offsetHeight > 0) {  
                      $(this).stop().animate({ height: 0 }, 450);  
                    }  
                  }  
      
                  if (this.id.indexOf(thisParent.id) != -1 && this.className == '') {  
                    $(this).addClass('selected');   
                    $(thisParent).addClass('slide');  
                  }  
                  else {  
                    $(this).removeClass();  
                    var ePrevious = this.previousSibling;  
                    while (ePrevious.nodeType != 1) { ePrevious = ePrevious.previousSibling; }  
                    $(ePrevious).removeClass();    
                  }  
                }); // end of $getdd.each  
              }   // end of if  
            }); // end of click  
          }); // end of $getdt.each  
        });


//　★　ここから追加
//　クリックしたリンクからクリックした親のＩＤを求め、クエリーのリンクを作成する
function slide_click(){
 $("#slide  li a").click(function(){
  var link_href          = $(this).attr("href");
  var link_target        = $(this).attr("target");
  var link_parent_id     = $(this).parent().parent().parent().prev().attr("id");// item1～5
  var new_location       = link_href+"?"+link_parent_id;// クエリー
  if(link_target=="_blank"){// ターゲット
   var targets           = window.open();
   targets.location.href = new_location;// 新しいウインドウで開く
  }else{
   location.href         = new_location;// 現在のウインドウで開く
  }
  return false;
 });
}
//　初期処理
function slide_init(){
 var location_search = location.search;//　クエリー部分を求める
 var location_s      = location_search.replace("\?", "");// ？は消す
 if(location_s!=""){
  document.getElementById(location_s).click(); // クエリー部分のＩＤをクリック
 }
}
$(document).ready(function(){
 slide_init();
 slide_click();
});


</script>      
</head>  
<body>  
      
    <div id="content">  
      <dl id="slide">  
        <dt><a href="#link">jQuery Core</a></dt>  
        <dt id="item1">Selectors</dt>  
        <dd id="sitem1">  
          <ul>  
            <li><a href="http://kiyoto777.web.fc2.com/test/test_ac.html" target="_blank">Basics</a></li>  
            <li><a href="http://kiyoto777.web.fc2.com/test/test_ac.html" target="_blank">Hierarchy</a></li>  
            <li><a href="http://kiyoto777.web.fc2.com/test/test_ac.html" target="_blank">Basic Filters</a></li>  
            <li><a href="http://kiyoto777.web.fc2.com/test/test_ac.html" target="_blank">Visibility Filters</a></li>  
            <li><a href="http://kiyoto777.web.fc2.com/test/test_ac.html" target="_blank">Attributes Filters</a></li>  
          </ul>  
        </dd>  
        <dt id="item2">Attributes</dt>  
        <dd id="sitem2">  
          <ul>  
            <li><a href="http://kiyoto777.web.fc2.com/test/test_ac.html" target="_blank">Attr</a></li>  
            <li><a href="http://kiyoto777.web.fc2.com/test/test_ac.html" target="_blank">Class</a></li>  
            <li><a href="http://kiyoto777.web.fc2.com/test/test_ac.html" target="_blank">HTML</a></li>  
            <li><a href="http://kiyoto777.web.fc2.com/test/test_ac.html" target="_blank">Text</a></li>  
            <li><a href="http://kiyoto777.web.fc2.com/test/test_ac.html" target="_blank">Value</a></li>          
          </ul>  
        </dd>  
        <dt id="item3">Traversing</dt>  
        <dd id="sitem3">  
          <ul>  
            <li><a href="http://kiyoto777.web.fc2.com/test/test_ac.html" target="_blank">Filtering</a></li>  
            <li><a href="http://kiyoto777.web.fc2.com/test/test_ac.html" target="_blank">Finding</a></li>  
            <li><a href="http://kiyoto777.web.fc2.com/test/test_ac.html" target="_blank">Chaining</a></li>  
          </ul>  
        </dd>  
        <dt id="item4">Manipulation</dt>  
        <dd id="sitem4">  
          <ul>  
            <li><a href="http://kiyoto777.web.fc2.com/test/test_ac.html" target="_blank">Changing Contents</a></li>  
            <li><a href="http://kiyoto777.web.fc2.com/test/test_ac.html" target="_blank">Inserting Inside</a></li>  
            <li><a href="http://kiyoto777.web.fc2.com/test/test_ac.html" target="_blank">Inserting Outside</a></li>  
            <li><a href="http://kiyoto777.web.fc2.com/test/test_ac.html" target="_blank">Inserting Around</a></li>  
            <li><a href="http://kiyoto777.web.fc2.com/test/test_ac.html" target="_blank">Replacing</a></li>                  
            <li><a href="http://kiyoto777.web.fc2.com/test/test_ac.html" target="_blank">Copying</a></li>          
          </ul>  
        </dd>  
        <dt id="item5">Effects</dt>  
        <dd id="sitem5">  
          <ul>  
            <li><a href="http://kiyoto777.web.fc2.com/test/test_ac.html" target="_blank">Basics</a></li>  
            <li><a href="http://kiyoto777.web.fc2.com/test/test_ac.html" target="_blank">Sliding</a></li>  
            <li><a href="http://kiyoto777.web.fc2.com/test/test_ac.html" target="_blank">Fading</a></li>  
            <li><a href="http://kiyoto777.web.fc2.com/test/test_ac.html" target="_blank">Custom</a></li>  
            <li><a href="http://kiyoto777.web.fc2.com/test/test_ac.html" target="_blank">Settings</a></li>          
          </ul>  
        </dd>  
        <dt><a href="#link">Ajax</a></dt>  
      </dl>  
        
      <div class="menuPad"></div>  
      
    </div>  
</body>  
</html>  


